<template>
	<view :style="$s.view_color">		
		<my-navbar :name="nav_title" :back="isback"></my-navbar>
		
		<view class="page-order">
			<view class="page-order-tabs" :style="{top:nav_height+'px'}">
				<my-tabs :list="carTabs" :lineColor="$s.theme" itemStyle="height:68rpx;width:152rpx;" :scrollable="false" @click="selectTab" :current="nowTabs" :activeStyle="{color: $s.theme}"></my-tabs>
			</view>
		    <scroll-view class="page-order-body" bindscrolltolower="reachBottom" :enableBackToTop="true" :lowerThreshold="100" :scrollAnchoring="true" :scrollY="true">
				<view class="page-order-bodyinner">
					<view class="order-list order-list--nodata" v-if="list.length<=0 && nodata">
					    <view class="span"></view>
					    <view class="h3">您暂无相关订单</view>
					    <view class="button">
					        <button class="my-but-primary" @click="$c.a('index/index')">去首页逛逛</button>
					    </view>
					</view>
					
					<view class="order-list" v-if="list.length>0">
						<block v-for="(item,index) in list" :key="index">
							<orderItem :order="item.order" :car="item.car" @refresh="refresh"></orderItem>
						</block>
						<u-loadmore :status="page_status" :line="true" marginTop="20"/>
					</view>
				</view>
		    </scroll-view>
		    <!-- <alipay-cash-act></alipay-cash-act> -->
		</view>
		
		<my-tabbar></my-tabbar>
	</view>
</template>

<script>
	import checkLogin from '@/mixins/loginCheck.js'
	import uPage from '@/common/page';
	export default {
		mixins:[checkLogin],
		data() {
			return {
				index:0,
				nav_title:'订单列表',
				nowTabs:0,
				nodata:false,
				nav_height:0,
				carTabs:[
					{
						name: '全部',
						status: -1,
					}, {
						name: '待付款',
						status: 1,
					}, {
						name: '待取车',
						status: 2,
					}, {
						name: '待还车',
						status: 3,
					}, {
						name: '已完成',
						status: 4,
					}
				],
				page_data:{},
				page_status:'loadmore',
				list:[],
				is_loading:false,		//是否正在加载
				isback:false,			//是否可以返回
			}
		},
		onLoad(option){
			if(option.i==='index'){		//底部菜单跳转过来的
				this.isback=false
			}else{						// 根据传参判断显示那个状态
				this.selectTab(option.i)
			}
			this.nav_height=uni.$u.sys().statusBarHeight+44
		},
		onShow(){
			
		},
		onReady(){
			this.selectTab()
		},
		onReachBottom(){
			this.getList(this.page_data);
		},
		computed:{
		},
		methods: {
			selectTab(item){
				if(item===undefined){
					//直接刷新
				}else if(item.index!=undefined){
					this.nowTabs=item.index;
				}else{
					//改变选项卡
					this.nowTabs=item
				}
				this.refresh()		
			},
			// 获取订单
			getList(page={}){
				if(this.is_loading || this.page_data.end) return;
				
				//判断是否需要加载
				this.is_loading=true;
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				
				let i = this.nowTabs;
				this.page_status='loading';
				
				let post={
					status: this.carTabs[i].status,
					page: page.number || 1,
					limit: 10
				}
				this.$u.api.orderList(post).then(res => {
					//追加数据
					this.list = this.list.concat(res.data.list);
					// 分页
					this.page_data=uPage.setData(res.data);
					this.page_status=this.page_data.load;
					
					// 防止一打开就出现暂无订单
					if (this.list.length <= 0) this.nodata = true;
				}).finally(res=>{
					uni.hideLoading();
					this.is_loading=false;
				})
			},
			//重新加载数据
			refresh(){
				//清空，重新加载
				this.list=[]
				this.page_data={}
				this.page_status='loadmore'
				this.nodata = false;
				this.getList()
			}
		}
	}
</script>

<style lang="scss">
	.page-order {
	    padding-bottom: 0!important;
	    background: #f5f5f5;
	}
	
	.page-order-tabs{
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 11;
		padding-bottom: 15rpx;
		background-color: #FFFFFF;
	}
	
	.page-order .page-order-body{
		margin-top: 80rpx;
	}
	
	.page-order .page-order-bodyinner {
	    margin-bottom: 20rpx;
	}
	
	.page-order.page-jd-bangs .page-order-bodyinner {
	    padding-bottom: 200rpx;
	}
	
	.order-list {
	    padding: 20rpx;
	    min-height: calc(100vh - 220rpx);
	}
	
	.order-list--nodata {
	    width: 100%;
	    height: 100%;
	    z-index: 9;
	    margin: 0!important;
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: center;
	    align-items: center;
	    -ms-flex-pack: center;
	    justify-content: center;
	    flex-direction: column;
	    pointer-events: none;
	}
	
	.order-list--nodata .span {
	    width: 250rpx;
	    height: 150rpx;
	    display: block;
	    background: url(../../static/images/nodata-bg.png) 50% no-repeat;
	    background-size: cover;
	    margin-top: -100rpx;
	}
	
	.order-list--nodata .h3 {
	    font-size: 28rpx;
	    color: #666;
	    margin-top: 40rpx;
	}
	
	.order-list--nodata .button {
	    width: 360rpx;
	    margin-top: 130rpx;
	    pointer-events: auto;
	}
</style>
